<template>
	<view class="register">
		<view class="from">
		
			<view class="input">
				<image src="/static/img/password2.png" />
				<input type="password" placeholder="请输原入密码" v-model="oldPwd" />
			</view>
			
			<view class="input">
				<image src="/static/img/password2.png" />
				<input type="password" placeholder="请输入新密码" v-model="newPwd" />
			</view>
			<view class="input">
				<image src="/static/img/password2.png" />
				<input type="password" placeholder="请再次输入新密码" v-model="confirmPwd" />
			</view>
			<view class="button" @tab='resetPwd'>确认修改</view>
		</view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import loginApi from '../../../servers/shop/login.js'
export default {
	components: { uniIcons },
	data() {
		return {
			confirmPwd:'',
			oldPwd:'',
			newPwd:''
		};
	},
	mounted(){
		
	},
	methods: {
		resetPwd(){
			
			if(!this.oldPwd){
				uni.showToast({
				    title: "请输入原始密码！",
					icon:'none',
					position:'bottom'
				})
				return
				
			}
			if(!this.newPwd){
				uni.showToast({
				    title: "请输入新密码！",
					icon:'none',
					position:'bottom'
				})
				return
				
			}
			if(!this.confirmPwd){
				uni.showToast({
				    title: "请输入确认密码！",
					icon:'none',
					position:'bottom'
				})
				return
				
			}
			let data = {
				oldPwd:this.oldPwd,
				newPwd:this.newPwd,
				confirmPwd:this.confirmPwd
			}
			loginApi.resetPwd(data).then(res=>{
				if(res.code === 200){
					uni.showToast({
					    title: "修改密码成功！",
						icon:'none',
						position:'bottom'
					})
					uni.redirectTo({
						url: './login'
					});
				}else{
					uni.showToast({
					    title: res.msg,
						icon:'none',
						position:'bottom'
					})
				}
			})

			
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.register {
	background: #fff;
	height: 100%;
	.headline {
		background: #bd3c8c;
		color: #fff;
	}
	.from {
		.input {
			margin: 30rpx 44rpx;
			border: 1px solid #e1e1e1; /*no*/
			border-radius: 100rpx;
			line-height: 100rpx;
			position: relative;
			image {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				left: 44rpx;
				top: 25rpx;
			}
			input {
				width: 100%;
				height: 86rpx;
				line-height: 100rpx;
				padding: 0 142rpx;
				box-sizing: border-box;
				font-size: 24rpx;
			}
			.tip {
				position: absolute;
				top: -10rpx;
				right: 22rpx;
				color: #bd3c8c;
				font-size: 28rpx;
			}
			.code {
				position: absolute;
				left: auto;
				right: 20rpx;
				top: 20%;
				width: 100rpx;
				height: 60%;
				img{
					opacity: 1;
				}
			}
			.go-code {
				position: absolute;
				top: -10rpx;
				right: 0rpx;
				width: 200rpx;
				font-size: 28rpx;
				text-align: center;
				color: #8a8a8a;
			}
		}
		.button {
			line-height: 90rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			margin: 67rpx 34rpx;
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
		}
	}
	.letter_code {
		position: fixed;
		z-index: 100;
		background: #fff;
		width: 660rpx;
		left: 50%;
		top: 50%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		transform: translate(-50%, -50%);
		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: 900;
			margin-bottom: 30rpx;
		}
		.code_input {
			position: relative;
			width: 80%;
			margin: 0 auto;
			input {
				border: 1px solid #e1e1e1; /*no*/
				line-height: 80rpx;
				width: 50%;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
			image {
				position: absolute;
				right: 0;
				top: 10%;
				height: 80%;
			}
		}
		.code_refresh {
			line-height: 80rpx;
			color: #3292ff;
			overflow: hidden;
			text {
				display: inline-block;
				margin-right: 20%;
				// float: right;
			}
		}
		.code_button {
			margin-top: 30rpx;
			text {
				text-align: center;
				display: inline-block;
				width: 40%;
				margin-left: 6.5%;
				line-height: 80rpx;
				border: 1px solid #e1e1e1; /*no*/
				font-size: 30rpx;
				border-radius: 5rpx;
			}
			.sub {
				background: #bd3c8c;
				border: 1px solid #bd3c8c; /*no*/
				color: #fff;
			}
		}
	}
}
</style>
